<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" default-page-size='18' :show-loading-more-no-more-view	= "false">
		
		<template #top>
			<cl-navbar :title="$t('group.invite_group.title')" leftIconSize="40rpx" placeholder autoBack>
				<template slot="right">
					<text style="font-size: 28rpx;" @click="complete">{{$t("group.common.complete")}}</text>
				</template>
			</cl-navbar>
			
			<view class="searchview">
				<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
			</view>
		</template>
		
		<view class="item" :key="item.friend_idx" v-for="(item,index) in itemArrs" @click="itemclick(item.friend_idx)">
			<view class="listitem">
				<view class="listitem__left">
					<image src="/static/icon/select.png" mode=""
						style="width: 36rpx;height: 36rpx;opacity: 0.6" v-if="item.inGroup"></image>
					<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;"
						v-else-if="members.includes(item.friend_idx)"></image>
					<image src="/static/icon/no-select.png" mode="" style="width: 36rpx;height: 36rpx;"
						v-else></image>
				</view>
				<view class="listitem__right">
					<cl-avatar :src="item.avatar_url" size="80rpx"></cl-avatar>
					<view class="listitem__right__view">
						<text class="listitem__right__view__nickname">{{item.friend_remark || item.nick_name}}</text>
						<text v-if="item.user_type && item.user_type > 0 && item.user_type != 6 && item.user_type != 8" class="typetag" style="background-color: #02D478;">{{$t('common.friend.authority')}}</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import sqliteFriend from '@/sqlite_services/friend.js'
	import groupMembersApi from "@/services/api/group_members.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				group_id: 0,
				members: [],
				searchval: '',
				memberSet:new Set([]),
				dataList: [],
			};
		},
		computed: {
			...mapState({
				friendList: state => state.friends.friendList,
			}),
			itemArrs() {
				// 进行一次遍历并修改数据，同时使用懒加载方式处理
				const newData = this.dataList.map(item => ({
					...item,
					inGroup: this.memberSet.has(item.friend_idx)
				}));
				return newData;
			}
		},
		onLoad() {
			let {
				group_id
			} = this.$Route.query
			this.group_id = group_id
			this.getInGroupFriends()
		},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
					this.$refs.paging.reload()
				}, 500,false)
			},
			queryList(){
				// 使用更高效的筛选操作
				const filteredData = this.friendList.filter(item => {
					// 当搜索值为空时，直接返回全部数据
					if (!this.searchval) {
						return true;
					}
					// 使用更高效的字符串包含检查
					return item.friend_remark.includes(this.searchval) || item.nick_name.includes(this.searchval);
				});
				this.$refs.paging.setLocalPaging(filteredData);
			},
			//获取在群内的好友
			async getInGroupFriends(){
				try{
					let res = await groupMembersApi.getInGroupFriends({
						group_id:this.group_id,
						friend_ids:this.friendList.map(item=>item.friend_idx)
					})
					if(res){
						this.memberSet = new Set(res.groupFriendIds)
					}
				}catch(e){
					//TODO handle the exception
				}
				
			},
			itemclick(id) {
				if (this.members.includes(id)) {
					// 如果数组中包含特定值，则删除该值
					const index = this.members.indexOf(id);
					this.members.splice(index, 1);
				} else {
					// 如果数组中不包含特定值，则添加该值
					this.members.push(id);
				}
			},
			//点击完成
			async complete() {
				if (!this.members.length) {
					uni.showToast({
						title: this.$t("group.common.pleaseSelectFriends"),
						icon: 'none'
					})
					return
				}
				let resapi = await this.$api.groups.invite({
					group_id: this.group_id,
					members: this.members
				})
				if (resapi) {
					uni.showToast({
						title: resapi.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1, // 返回的页面数，1 表示返回到上一个页面
						});
					}, 1000)
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.typetag{
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		margin-left: 10rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #FF7676;
	}
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}

	// .listview {
	// 	flex: 1;
	// 	overflow: hidden;

		.listitem {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;

			&__left {
				display: flex;
				align-items: center;
			}

			&__right {
				margin-left: 20rpx;
				flex: 1;
				display: flex;
				align-items: center;
				&__view{
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					&__nickname {
						color: #fff;
						font-size: 28rpx;
					}
				}
			}
		}
	// }

	
</style>